html,body{
    height: 100%;
    margin: 0;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.frame{
    position: relative;
    width: 400px;
    height: 400px;

    background-color: #000;
    border-radius: 3px;
    box-shadow: 1px 2px 10px rgba(0,0,0,0.3);
    filter: contrast(25);
}

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ball{
    position: relative;
    width: 90px;
    height: 90px;
    background-color: #fff;
    border-radius: 50%;
    filter: blur(15px);
}

@for $i from 1 through 8{

    .blubb-#{$i}{
        position: absolute;
        top: 20px;
        left: 20px;
        width: 50px;
        height: 50px;
        // background-color: #fff;
        transform: rotate((random(300))+deg);

        &:after{
            position: absolute;
            display: block;
            content: "";
            width: 50px;
            height: 50px;
            background-color: #fff;
            border-radius: 50%;
            transform-origin: (40-$i*3)+px (40-$i*3)+px;
            animation: rotate (2.5+$i/5)+s ease-in-out ($i/5)+s infinite;
            filter: blur(5px);
        }
    }
}

@for $i from 1 through 10{
    .sparkle-#{$i}{
        position: absolute;
        top: 38px;
        left: 38px;
        width: (7+$i) + px;
        height: (7+$i) + px;
        transform: rotate((random(300)) + deg);

        &:after{
            position:absolute;
            display: block;
            content: "";
            width: (7 + $i) + px;
            height: (7 + $i) + px;
            background-color: #fff;
            border-radius: 50%;
            transform-origin: (60-2*$i)+px (60-2*$i)+px;
            animation: rotate (3.5+$i/5)+s ease-in-out ($i/5)+s infinite;
            filter: blur(3px);
        }
    }
}

@keyframes rotate {

    from {
        transform: rotate(0deg) translate3d(0,0,0);
    }

    to {
        transform: rotate(360deg) translate3d(0,0,0);
    }
    
}